import React from 'react';
import { Link } from 'react-router-dom';
import moment from 'moment';
import { message, Table, Popconfirm, Button } from 'antd';
import BreadCrumb from '@/view/comps/breadcrub/breadcrub';

class UserList extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			currentPage: 1,
			userList: []
		};
	}
	componentDidMount() {
		this.getUserList();
	}
	getUserList = () => {
		AJAX({
			url: '/findUserList',
			data: {}
		}).then(res => {
			this.setState({
				userList: res.data || []
			});
		}, err => message.error(err.msg));
	}
	deleteUser = (id) => {
		const param = {
			_id: id
		};
		AJAX({
			url: '/deleteUser',
			data: param
		}).then(res => {
			message.success('删除成功');
			this.getUserList();
		}, err => message.error(err.msg));
	}

	renderTable = () => {
		const userList = this.state.userList;
		userList.forEach(item => {
			// item.createTimeformat = moment(item.createTime).format('YYYY-MM-DD HH:mm:ss');
			// console.log(moment(item.createTime).format('YYYY-MM-DD HH:mm:ss'));
		});
		const columns = [
			{
				title: '用户名',
				align: 'center',
				dataIndex: 'username',
			}, 
			{
				title: '创建时间',
				align: 'center',
				dataIndex: 'createTime',
			},
			{
				title: '角色值',
				align: 'center',
				dataIndex: 'role',
			}, 
			{
				title: '操作',
				align: 'center',
				dataIndex: 'operation',
				render: (text, row) => {
				  return (
						<Popconfirm 
							title="确定要删除吗?" 
							okText="确定"
							cancelText="取消"
							onConfirm={() => this.deleteUser(row._id)}
						>
							<span className="blue">删除</span>
						</Popconfirm>
				  );
				},
			}
		];
		return (
			<Table 
				dataSource={userList} 
				columns={columns} 
				bordered
				rowKey="_id"
				locale = {{emptyText: '暂无数据'}}
				pagination={{
					current: this.state.currentPage,
					onChange: this.onChangePage,
					defaultPageSize: 100,
					showTotal: total => `总计 ${total} 条`}}
			/>
		);
	}
	render() {
		return (
			<div>
				<BreadCrumb bread={[{title: 'Dashboard', link: '/'}, {title: '用户列表'}]}/>
				<div className="page-container">
					<Link to={'/app/user/adduser'}><Button type="primary" className="mb-10">新增用户</Button></Link>
					
					{this.renderTable()}
				</div>
			</div>
		);
	}

	onChangePage = (page) => {
		this.setState({currentPage: page});
	}
}
export default UserList;


/**
 * table 组件的使用
 * dataIndex
 * key
 * rowKey
 * 
 * 分页 pagination 的使用
 */